<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <h1>{{msg}}</h1>
        <button @click="modify">修改数据</button>
        <button @click="destroy">销毁实例对象</button>
    </div>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script>
        // function Girl() {}

        // new Girl()
        const app = new Vue({
            el: "#app",
            // template:"<h2>你好，情人劫</h2>",
            data() {
                return {
                    msg:"helloworld",
                    timer: null
                }
            },
            methods: {
                modify() {
                    this.msg = "你好世界"
                },
                test() {
                    console.log("test")
                },
                destroy() {
                    // 摧毁app
                    app.$destroy();
                }
            },
            // 创建这个空对象之前执行
            beforeCreate() {
                // 这个函数是在 实例对象 没有创建之前执行了
                // debugger
            },
            created() {
                this.timer = setInterval(()=> {
                    console.log("这是一个定时器")
                }, 1000)
                // 这个函数是 在实例对象创建完毕执行执行了
                console.log(this.msg)
                // debugger
            },
            beforeMount() {
                // debugger
                console.log("在template还未挂载之前执行")
            },
            mounted() {
                // debugger
                console.log("在虚拟DOM真正挂载完毕")
                // DOM操作
            },
            beforeUpdate() {
                // debugger
                console.log("在数据更新之前执行")
            },
            updated() {
                // debugger
                console.log("在数据更新完毕")
            },
            beforeDestroy() {
                // 这里面写什么代码？
                // 清除定时器，清除事件处理函数。。。
                clearInterval(this.timer)
            },
            destroyed() {
                console.log("摧毁完毕")
            }
        })

        // 没有el的时候可以使用$mount
        // app.$mount(document.querySelector("#app"))

        // var obj = {
        //     msg:"helloworld",
        //     test() {

        //     }
        // }
    </script>
</body>
</html>